/**
 * Created by helin3 on 2017/12/07.
 */
define([
  './themes/lang/' + window.YUFP_SYS_CONFIG.language + '/pages/example/template/queryNestedForm.js'
], function (require, exports) {
  exports.ready = function (hashCode, data, cite) {
    // 注册该功能要用到的数据字典
    yufp.lookup.reg('NATIONALITY,PUBLISH_STATUS');
    var vm = yufp.custom.vue({
      el: '#query_nested_form',
      data: function () {
        var me = this;
        return {
          queryFields: [
            {placeholder: this.$t('queryNestedForm.bt'), field: 'id', type: 'input'},
            {placeholder: this.$t('queryNestedForm.lx'), field: 'type', type: 'select', dataCode: 'NATIONALITY'},
            {placeholder: this.$t('queryNestedForm.zz'), field: 'author', type: 'input'}
          ],
          dataUrl: '/trade/example/list',
          tableColumns: [
            {
              type: 'expand',
              template: function () {
                return '<template scope="props">\
                            <el-form label-position="right" inline class="demo-table-expand">\
                              <el-form-item :label="$t(\'queryNestedForm.bm\')"><span>{{ props.row.id }}</span></el-form-item>\
                              <el-form-item :label="$t(\'queryNestedForm.bt\')"><span>{{ props.row.title }}</span></el-form-item>\
                              <el-form-item :label="$t(\'queryNestedForm.lx\')"><span>{{ props.row.type }}</span></el-form-item>\
                              <el-form-item :label="$t(\'queryNestedForm.zz\')"><span>{{ props.row.author }}</span></el-form-item>\
                              <el-form-item :label="$t(\'queryNestedForm.shr\')"><span>{{ props.row.auditor }}</span></el-form-item>\
                              <el-form-item :label="$t(\'queryNestedForm.yds\')"><span>{{ props.row.pageviews }}</span></el-form-item>\
                            </el-form>\
                        </template>';
              }
            },
            {label: this.$t('queryNestedForm.bm'), prop: 'id'},
            {
              label: this.$t('queryNestedForm.mc'),
              prop: 'title',
              width: 260,
              sortable: true,
              resizable: true,
              template: function () {
                // 自定义渲染模板,里面的内容可以是原生HTML或element-ui，此处暂且仅支持事件监听，至于格式化内容请参考formatter方法
                // 关于如何配置click事件方法，
                // 1、固定写法：_$event('custom-row-click', scope) ，其中custom-row-click是用于在组件内部触发事件方法，scope是传递的参数
                // 2、在el-table-x组件上通过配置监听：@custom-row-click="customRowClick" ，其中customRowClick是当前业务功能接收事件处理的方法
                return '<template scope="scope">\
                            <a href="javascipt:void(0);" style="text-decoration:underline;" @click="_$event(\'custom-row-click\', scope)">{{ scope.row.title }}</a>\
                        </template>';
              }
            },
            {label: this.$t('queryNestedForm.lx'), prop: 'type', width: 110, dataCode: 'NATIONALITY'},
            {label: this.$t('queryNestedForm.zz'), prop: 'author', width: 110},
            {label: this.$t('queryNestedForm.shr'), prop: 'auditor', width: 110},
            {label: this.$t('queryNestedForm.yds'), prop: 'pageviews', width: 100},
            {
              label: this.$t('queryNestedForm.cz'),
              width: 86,
              template: function () {
                return '<template scope="scope">\
                            <el-button type="text"  size="small" @click="_$event(\'custom-row-op\', scope, \'edit\')">编辑</el-button>\
                            <el-button type="text"  size="small" @click="_$event(\'custom-row-op\', scope, \'delete\')">删除</el-button>\
                        </template>';
              }
            }
          ]
        };
      },
      methods: {
        createFn: function () {
          this.$alert(this.$t('queryNestedForm.xz'), this.$t('queryNestedForm.ts'));
        },
        editFn: function () {
          this.$alert(this.$t('queryNestedForm.xg'), this.$t('queryNestedForm.ts'));
        },
        detailFn: function () {
          this.$alert(this.$t('queryNestedForm.xq'), this.$t('queryNestedForm.ts'));
        },
        deleteFn: function () {
          this.$alert(this.$t('queryNestedForm.sc'), this.$t('queryNestedForm.ts'));
        },
        customRowClick: function (scope) {
          // 当前行号：scope.$index
          // 当前行数据：scope.row
          // 当前列对象：scope.column
          this.$alert(this.$t('queryNestedForm.nxzdxzw') + scope.row.id, this.$t('queryNestedForm.ts'));
        },
        customRowOp: function (scope, op) {
          // 当前行号：scope.$index
          // 当前行数据：scope.row
          // 当前列对象：scope.column
          this.$alert(this.$t('queryNestedForm.nxzzzcz') + op + this.$t('queryNestedForm.dqxzw') + scope.row.id, this.$t('queryNestedForm.ts'));
        }
      }
    });
  };
});
